<template>
  <div>
    <div class="order">
      <!-- 弟一部分：标题 -->
      <div class="obox">
        <b class="bbox"
          ><svg
            @click="redetail()"
            t="1565833922621"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4181"
            width="32"
            height="32"
          >
            <path
              d="M211.534802 512 704.372481 23.272727 798.246325 116.363636 399.282489 512 798.246325 907.636364 704.372481 1000.727272 211.534802 512Z"
              p-id="4182"
            ></path></svg
        ></b>
        <b class="obb" style="font-size:28px;color:#E6FFF5">填写订单</b>
      </div>

      <!-- 弟二部分：用户信息 -->
      <div class="mbox">
        <!-- 默认地址 -->
        <div>
          <span class="span1" style="color:#E6FFF5">默认 </span>
          <span class="span2">上海市奉贤区海湾镇</span>
        </div>

        <!-- 详细地址 -->
        <div class="sibox">
          <div class="sibbox">
            <b style="font-size:23px;"
              >地址:{{ordata.home}}</b
            >
          </div>
          <div class="sibbbox">
            <b
              ><svg
                @click="ic()"
                t="1565766381297"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="10627"
                width="32"
                height="32"
              >
                <path
                  d="M752.17445088 532.78953506c0.44315156-0.81064424 0.94034708-1.5996709 1.29703008-2.44274063s0.52962099-1.65371309 0.78902665-2.47516523 0.58366318-1.67533066 0.75660117-2.54001797a25.86494355 25.86494355 0 0 0 0.29183204-2.58325136c0.09727734-0.86468643 0.24859776-1.72937373 0.25940566-2.59406104a25.51906933 25.51906933 0 0 0-0.2053626-2.57244258c-0.07565977-0.87549521-0.08646855-1.76179922-0.24859775-2.62648653s-0.45396036-1.66452187-0.69174931-2.49678281a26.51345859 26.51345859 0 0 0-0.75660117-2.55082675 25.87575234 25.87575234 0 0 0-1.21056153-2.37788789c-0.41072607-0.78902666-0.74579238-1.5996709-1.24298701-2.36708086s-1.08085869-1.42673291-1.70775615-2.16171651-0.98358135-1.37269073-1.58886211-1.99958818l-0.17293799-0.14051162a0.95115586 0.95115586 0 0 0-0.12970283-0.16212921L315.83187617 70.03077823a27.47542325 27.47542325 0 0 0-38.68392568-0.07565977 27.02146201 27.02146201 0 0 0-0.07565976 38.43532792l412.17457851 411.11533741L276.79126748 915.26212198a27.02146201 27.02146201 0 0 0-0.68094053 38.43532792 27.47542325 27.47542325 0 0 0 38.6839248 0.67013262l432.44067569-414.93076787 0.14051162-0.16212832 0.1621292-0.12970371c0.59447197-0.59447197 1.08085869-1.26460459 1.55643575-1.89150205a26.81609941 26.81609941 0 0 0 1.82665107-2.16171739 25.68119766 25.68119766 0 0 0 1.2537958-2.30222812z"
                  fill="#4D4D4D"
                  p-id="10628"
                ></path></svg
            ></b>
          </div>
        </div>

        <!-- 用户姓名 手机 -->
        <div class="bubox">
          <span style="font-size:20px;">{{ ordata.username }}</span>
          <span class="spann" style="font-size:20px;">{{ ordata.phone }}</span>
        </div>
      </div>

      <!-- 第三部分：商品信息 -->
      <div class="sbox">
        <div class="imgg">
          <img :src="tail.img" width="80px" height="100px" alt="" />
        </div>
        <div class="ilbox">
          <span style="font-size:20px">{{ tail.shopname }}</span>
          <span style="font-size:20px">{{ tail.price }} X {{ this.num }}</span>
          <div>
            <span style="font-size:25px;color:red">价格</span>
            <el-input-number
              class="ji"
              v-model="num"
              @change="handleChange"
              :min="1"
              :max="10"
              label="描述文字"
            ></el-input-number>
          </div>
        </div>
      </div>

      <!-- 第四部分:配送信息 -->
      <div class="pei">
        <span style="font-size:25px">配送</span>
        <span class="pspan" style="font-size:25px"
          >物流
          <svg
            t="1565772980080"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="13576"
            width="32"
            height="32"
          >
            <path
              d="M863.5 416.1c-52.9 0-95.8 42.9-95.8 95.8s42.9 95.8 95.8 95.8 95.8-42.9 95.8-95.8-42.9-95.8-95.8-95.8zM511.3 416.1c-52.9 0-95.8 42.9-95.8 95.8s42.9 95.8 95.8 95.8 95.8-42.9 95.8-95.8c0.1-52.9-42.8-95.8-95.8-95.8zM159.8 416.1c-52.9 0-95.8 42.9-95.8 95.8s42.9 95.8 95.8 95.8 95.8-42.9 95.8-95.8-42.9-95.8-95.8-95.8z"
              p-id="13577"
            ></path>
          </svg>
        </span>
      </div>

      <!-- 第五部分 -->
      <div class="fibox">
        <div class="onefi">
          <b style="font-size:25px">商品金额</b>
          <b style="font-size:25px;color:red">￥{{ tail.price * this.num }}</b>
        </div>

        <div class="twofi">
          <span style="font-size:25px">运费</span>
          <b style="font-size:25px;color:red">+￥0.00</b>
        </div>

        <div class="thrfi">
          <span style="font-size:25px">优惠券</span>
          <b style="font-size:25px;color:red">-￥0.00</b>
        </div>
      </div>

      <!-- 第六部分 -->
      <div>
        <textarea
          class="tera"
          name=""
          id=""
          style="font-size:30px"
          placeholder="买家留言，45字以内"
          cols="30"
          rows="10"
          maxlength="45"
        ></textarea>
      </div>
    </div>

    <!-- 第七部分 底部 -->
    <div class="bubbox">
      <div class="onbu">
        应付:￥<span style="font-size:30px;color:red">{{tail.price}}</span>
      </div>

      <b class="twbu" style="color:#E6FFF5" @click="money">
        提交订单
      </b>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      num: 1,
      ordata: "",
      tail: ""
    };
  },
  created() {
    console.log("---------id--&&--tail-----");
    this.tail = this.$route.query.tail;
    this.id = this.$route.query.id;
    console.log(this.tail);
    this.gobuy();
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    gobuy() {
      let that = this;
      this.$axios
        .get("/goBuy", {
          params: {
            id: this.id
          }
        })
        .then(function(response) {
          console.log("********gobuydata*******");
          // console.log(response.data);
          that.ordata = response.data;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    ic() {
      console.log("**addsite***");
      this.$router.push({
        path: "/savesite"
      });
    },
    redetail() {
      console.log("*******return detail*********");
      this.$router.push({
        path: "/detail"
      });
    },
    money() {
        let that=this
    this.$axios.post('/addorder', {
   home:this.ordata.home,
   u_id:this.id,
   price:this.tail.price
  })
  .then(function (response) {
   if(response.data.code==1){
       that.$router.push({
           path:'/proment',
       })
   }
  })
  .catch(function (error) {
    console.log(error);
  });
    }
  }
};
</script>
<style>
.order {
  width: 100%;
  height: 800px;
  background: #f2f2f2;
}

.obox {
  width: 100%;
  height: 60px;
  background: red;
  padding-top: 20px;
}

.bbox {
  /* background: yellow; */
  /* width: 30%; */
  height: 60px;
  margin-left: 5%;
  float: left;
}

.obb {
  padding-right: 15%;
}

.mbox {
  width: 100%;
  height: 130px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  border-bottom: solid 8px red;
}

.mbox .span1 {
  width: 50px;
  height: 30px;
  background: red;
  float: left;
  margin-left: 2%;
  font-size: 20px;
  border-radius: 25px;
}

.mbox .span2 {
  font-size: 20px;
  float: left;
  margin-left: 3%;
}

.sibox {
  width: 100%;
  height: 48%;
  /* background: green; */
  display: flex;
  flex-direction: row;
}

.sibbox {
  width: 90%;
  height: 100%;
  /* background: pink; */
}

.sibbbox {
  width: 10%;
  height: 55%;
  padding-top: 4%;
  /* background: orange; */
}

.bubox {
  width: 100%;
  height: 20%;
  /* background: red; */
  float: left;
}

.bubox span {
  float: left;
  padding: 2%;
}

.sbox {
  width: 100%;
  height: 150px;
  background: #ffffff;
  display: flex;
  flex-direction: row;
}

.imgg {
  margin: 10px;
}

.ilbox {
  width: 80%;
  height: 90%;
  /* background: pink; */
  margin: 10px;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.ilbox span {
  margin-bottom: 10px;
}

.ji {
  float: right;
}

.pei {
  width: 100%;
  height: 50px;
  background: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 10px;
  margin-bottom: 5px;
}

.pei span {
  margin-top: 5px;
  margin-left: 2%;
}

.pspan {
  float: right;
  margin-right: 30px;
}

.fibox {
  width: 100%;
  height: 98px;
  display: flex;
  flex-direction: column;
  background: #ffffff;
}

.onefi {
  width: 92%;
  height: 50px;
  /* background: blue; */
  display: flex;
  justify-content: space-between;
  margin-left: 2%;
  margin-right: 6%;
}

.twofi {
  display: flex;
  justify-content: space-between;
  margin-left: 2%;
  margin-right: 8%;
}

.thrfi {
  display: flex;
  justify-content: space-between;
  margin-left: 2%;
  margin-right: 8%;
}

.tera {
  margin-top: 40px;
  margin-bottom: 80px;
  width: 98%;
  height: 50px;
  /* background: red; */
}

.bubbox {
  width: 100%;
  height: 50px;
  /* background:yellow; */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.onbu {
  width: 50%;
  height: 100%;
  /* background: pink; */
  font-size: 20px;
  display: flex;
  flex-direction: row;
}

.twbu {
  float: right;
  width: 30%;
  height: 71%;
  font-size: 20px;
  text-align: center;
  padding-top: 20px;
  background: red;
}
</style>
